import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const EchartsTwo:React.FC = () => {
    // 使用 useRef 创建一个 ref，用于获取 DOM 元素
    const chartRef = useRef(null);

    // 定义你的 ECharts 配置选项
    const option = {
        backgroundColor: 'white',
        color: ['#85b6b2', '#6d4f8d', '#cd5e7e', '#e38980', '#f7db88'],
        tooltip: {
            show: true,
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
            itemGap: 12,
            top: '87%',
            data: ['01', '02', '03', '04', '05', '06'],
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        series: [
            {
                name: 'Line 1',
                type: 'pie',
                clockWise: false,
                radius: [100, 120],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        shadowBlur: 40,
                        shadowColor: 'rgba(40, 40, 40, 0.5)',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: 300,
                        name: '01',
                    },
                    {
                        value: 50,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0, 0, 0, 0)',
                                label: { show: false },
                                labelLine: { show: false },
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        },
                    },
                ],
            },
            {
                name: 'Line 2',
                type: 'pie',
                clockWise: false,
                radius: [80, 100],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        shadowBlur: 40,
                        shadowColor: 'rgba(40, 40, 40, 0.5)',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: 150,
                        name: '02',
                    },
                    {
                        value: 60,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0, 0, 0, 0)',
                                label: { show: false },
                                labelLine: { show: false },
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        },
                    },
                ],
            },
            {
                name: 'Line 3',
                type: 'pie',
                clockWise: false,
                radius: [60, 80],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        shadowBlur: 40,
                        shadowColor: 'rgba(40, 40, 40, 0.5)',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: 80,
                        name: '03',
                    },
                    {
                        value: 50,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0, 0, 0, 0)',
                                label: { show: false },
                                labelLine: { show: false },
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        },
                    },
                ],
            },
            {
                name: 'Line 4',
                type: 'pie',
                clockWise: false,
                radius: [40, 60],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        shadowBlur: 40,
                        shadowColor: 'rgba(40, 40, 40, 0.5)',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: 45,
                        name: '04',
                    },
                    {
                        value: 30,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0, 0, 0, 0)',
                                label: { show: false },
                                labelLine: { show: false },
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        },
                    },
                ],
            },
            {
                name: 'Line 5',
                type: 'pie',
                clockWise: false,
                radius: [20, 40],
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        shadowBlur: 40,
                        shadowColor: 'rgba(40, 40, 40, 0.5)',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: 30,
                        name: '05',
                    },
                    {
                        value: 30,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0, 0, 0, 0)',
                                label: { show: false },
                                labelLine: { show: false },
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        },
                    },
                ],
            },
        ],
    };

    useEffect(() => {
        // 初始化 ECharts 实例
        const chartInstance = echarts.init(chartRef.current);

        // 将配置选项设置到 ECharts 实例上
        chartInstance.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            chartInstance.dispose();
        };
    }, []);

    return (
        <div
            ref={chartRef} // 将 ref 附加到 div 上
            style={{ width: '100%', height: '400px' }} // 设定宽度和高度
        ></div>
    );
};

export default EchartsTwo;
